import { useRef } from 'react'
import { connect } from 'react-redux'
import { createPersonAction } from '../redux/actions/person_action'

const PersonComponent = props => {
    const { personInfo, counter, addPerson } = props

    const nameRef = useRef()
    const ageRef = useRef()


    const onClickAdd = () => {
        const personObj = {
            name: nameRef.current.value,
            age: ageRef.current.value
        }
        addPerson(personObj)
    }
    return (
        <>
            <h3>This is Person Component</h3>&nbsp;
            <span>Counter: {counter}</span><br />
            <span>姓名</span><input ref={nameRef} name='name' />&nbsp;
            <span>年龄</span><input ref={ageRef} name='age' />&nbsp;
            <button onClick={onClickAdd}>添加</button>
            <ul>
                {personInfo.map(data => <li>{data.name},{data.age}</li>)}
            </ul>
        </>
    )
}

export default connect(
    state => ({
        personInfo: state.person,
        counter: state.counter
    }),
    {
        addPerson: createPersonAction
    }
)(PersonComponent)